<!DOCTYPE html>
<html>
<head>
    <title>Cylindrical Capacitor Diagram</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="capacitorCanvas" width="550" height="350"></canvas>
    <script>
        const canvas = document.getElementById('capacitorCanvas');
        const ctx = canvas.getContext('2d');

        // Helper function to draw an arrowhead at a specific point and angle
        function drawArrowHead(ctx, x, y, angle, headlen = 8) {
            ctx.save();
            ctx.beginPath();
            ctx.moveTo(x, y);
            ctx.lineTo(x - headlen * Math.cos(angle - Math.PI / 6), y - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(x, y);
            ctx.lineTo(x - headlen * Math.cos(angle + Math.PI / 6), y - headlen * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
            ctx.restore();
        }
        
        // --- Main Drawing ---

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 1.5;

        // Parameters
        const cx = 140;
        const cy = 180;
        const r1 = 30;
        const r2 = 60;
        const length = 320;

        // 1. Draw the main cylinder body
        ctx.beginPath();
        // Top line
        ctx.moveTo(cx, cy - r2);
        ctx.lineTo(cx + length, cy - r2);
        // Rounded back end
        ctx.arc(cx + length, cy, r2, -Math.PI / 2, Math.PI / 2, false);
        // Bottom line
        ctx.lineTo(cx, cy + r2);
        ctx.stroke();

        // 2. Draw the front face (annulus)
        // Outer circle
        ctx.beginPath();
        ctx.arc(cx, cy, r2, 0, 2 * Math.PI);
        ctx.stroke();
        // Inner circle
        ctx.beginPath();
        ctx.arc(cx, cy, r1, 0, 2 * Math.PI);
        ctx.stroke();

        // 3. Draw annotations
        
        // Length 'l'
        const y_l = cy - r2 - 40;
        ctx.beginPath();
        // Main horizontal line with arrows
        ctx.moveTo(cx, y_l);
        ctx.lineTo(cx + length, y_l);
        drawArrowHead(ctx, cx, y_l, Math.PI); // Left arrow
        drawArrowHead(ctx, cx + length, y_l, 0); // Right arrow
        // Ticks
        ctx.moveTo(cx, y_l - 5);
        ctx.lineTo(cx, y_l + 5);
        ctx.moveTo(cx + length, y_l - 5);
        ctx.lineTo(cx + length, y_l + 5);
        ctx.stroke();
        // 'l' label
        ctx.font = 'italic 20px Times New Roman';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('l', cx + length / 2, y_l - 5);


        // Radii R1 and R2
        ctx.textBaseline = 'middle';
        
        // R1
        const angle1 = 135 * Math.PI / 180; // Up and left direction
        const endX1 = cx + r1 * Math.cos(angle1);
        const endY1 = cy + r1 * Math.sin(angle1);
        ctx.beginPath();
        ctx.moveTo(cx, cy);
        ctx.lineTo(endX1, endY1);
        ctx.stroke();
        drawArrowHead(ctx, endX1, endY1, angle1);
        
        // R1 Arc
        ctx.beginPath();
        ctx.arc(cx, cy, 18, -Math.PI / 2, angle1, false); // From vertical-up, clockwise
        ctx.stroke();

        // R1 Label
        ctx.save();
        ctx.font = 'italic 20px Times New Roman';
        ctx.textAlign = 'right';
        ctx.fillText('R', endX1 - 12, endY1 - 12);
        ctx.font = 'italic 14px Times New Roman';
        ctx.textAlign = 'left';
        ctx.fillText('1', endX1 - 10, endY1 - 8);
        ctx.restore();

        // R2
        const angle2 = 45 * Math.PI / 180; // Up and right direction
        const endX2 = cx + r2 * Math.cos(angle2);
        const endY2 = cy + r2 * Math.sin(angle2);
        ctx.beginPath();
        ctx.moveTo(cx, cy);
        ctx.lineTo(endX2, endY2);
        ctx.stroke();
        drawArrowHead(ctx, endX2, endY2, angle2);

        // R2 Arc
        ctx.beginPath();
        ctx.arc(cx, cy, 40, -Math.PI / 2, angle2, false); // From vertical-up, clockwise
        ctx.stroke();

        // R2 Label
        ctx.save();
        ctx.font = 'italic 20px Times New Roman';
        ctx.textAlign = 'left';
        ctx.fillText('R', endX2 + 8, endY2 - 12);
        ctx.font = 'italic 14px Times New Roman';
        ctx.fillText('2', endX2 + 20, endY2 - 8);
        ctx.restore();

        // 4. Draw the caption
        ctx.font = '22px "SimSun", "Song Ti"'; // Font for Chinese characters
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        ctx.fillText('习题 7-64 图', canvas.width / 2 - 40, cy + r2 + 30);

    </script>
</body>
</html>